<template>
  <div class="article-list">
    <van-swipe-cell
      :disabled="disableSwiper"
    >
      <van-cell center :to="`/article/${list.id}`">
        <h3 slot="title" class="list-title">{{ list.title }}</h3>
        <div slot="label" class="list-desc">
          <p>
            {{ list.description }}
          </p>
          <p class="desc">
            <span><van-icon name="eye" />收藏({{ list.lovenum }})</span>
            <span><van-icon name="good-job" />点赞({{ list.click }})</span>
          </p>
        </div>
        <img
          class="list-img"
          :src="`http://124.223.14.236:8060/${list.pic}`"
          alt=""
        />
      </van-cell>
      <template #right>
        <!-- <van-button square type="danger" text="取消" /> -->
        <slot></slot>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: "ArticleList",
  props: {
    // 是否禁止滑动
    disableSwiper: {
      type: Boolean,
      default: true,
    },
    list: {
      typr: Object,
      default: () => ({}),
    },
  },
};
</script>
<style scoped lang="less">
.article-list {
  margin-top: 10px;
  .list-title {
    font-size: 32px;
    color: #222;
    font-weight: normal;
  }
  .list-desc {
    font-size: 28px;
    .desc {
      color: #aaa;
      font-size: 24px;
      span {
        margin-right: 20px;
      }
    }
  }
  /deep/ .van-swipe-cell__value {
    width: 260px;
    flex: unset;
  }
  .list-img {
    width: 240px;
  }
  /deep/ .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }
}
</style>